﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>图片批量上传</title>
	<style>
		/*添加图片*/
		.icon-addpic{background: url("icon-addpic.png") no-repeat center center; background-size:60px auto;}
		.addpic{ height: 60px; width: 60px; overflow: hidden;}
	    .inputImage{ position: absolute; top:50%;left: 50%; margin-left: -25px; margin-top: -25px;  width: 50px; height: 50px;overflow: hidden; opacity: 0;}
		.lineheight_60{ line-height: 60px;}
		#image_preview_box{ width: 100%;}
		.image_show{width: 60px;height: 60px;background-color:#EBEEEF; position: relative;  margin-right: 3%; float: left; margin-top: 8px;}
		.icon-delete{background: url("icon-delete.png") no-repeat center center; background-size:22px auto;}
		.delete-img{position: absolute;  right:-8px; top: -8px; width: 22px; height: 22px; text-indent: -999em; overflow: hidden;  z-index: 99;}
		.images{ display: table-cell;vertical-align:middle;    width: 60px;  height: 60px;}
		.images img{ vertical-align:middle;}
		/* 定义清除浮动的样式 */
		.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
		
	</style>
</head>
<body>
    <div>
        <form action="" method="post" id="rateForm" >
			<div>
				<div class=" lineheight_60">图片上传</div>
				<div>

                    <div class="control-field_w clearfix">
                        <div id="image_preview_box" class="clearfix" style="float: left;">
                            <div style="width: 60px;position: relative;height: 60px;float: left;margin-top: 8px;">
                                <div class="icon-addpic addpic"></div>
                                <input type="file" id="inputImage" class="inputImage" multiple>
                            </div>
                        </div>

                    </div>

				</div>
			</div>
            
            <div id="image-list-data" style="display: none">
			</div>
			
			<div style="margin: 10px 0 0 0;">
				<input type="submit" style="width:100%" value="图片上传" >
			</div>
            
        </form>
    </div>

<script type="text/javascript" src="uploadImg.js"></script>
<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript">
    $(function(){
        /**
         * 图片上传插件
         */
        var uploadImg = new UploadImg({
			imgInputId: "inputImage",        //图片选择框ID
			imgName: "base64ImgList",        //后台接收图片名称
			imgSize: 600,                    //压缩图片大小
            maxQty:10,
			previewDivId: "image_preview_box", //图片预览div的ID
			base64DataId: "image-list-data",   //存放图片base64数据隐藏域ID
			addCallback:function(input){
				console.info('添加图片成功','数据框ID='+input.id);
			},
			delCallback:function(id){
				console.info('删除图片成功','数据ID='+id);
			},
            fullCallback:function(currentQty,maxQty){
                console.info('单次最多上传'+maxQty+'张图片');
            }
		});
		
		$('#rateForm').submit(function(e){
			e.preventDefault(e);
			var inputList = $('#image-list-data input');
			$.each(inputList,function(index,input){
				console.info(input.value);
			})
		});

        
    })
</script>
</body>
</html>